<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="css/lightbox.min.css">
    <link rel="stylesheet" href="musicfont/iconfont.css">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/lightbox-plus-jquery.min.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/template-web.js"></script>

</head>

<body>
    <!-- 歌曲音频   https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/%E5%85%84%E5%A6%B9%20-%20%E6%96%B9%E5%A4%A7%E5%90%8C%E3%80%81%E8%96%9B%E5%87%AF%E7%90%AA.mp3?sign=b3d0b548449f7e56ea69053ab3febe9c&t=1621685687 -->
    <!-- 
    根据歌曲id 异步查询 歌曲的详情音频URL
    https://autumnfish.cn/song/url

    根据歌曲id 异步查询 歌曲的详情评论
    https://autumnfish.cn/comment/music

    根据歌曲id异步查询 歌曲的中间的图片
    https://autumnfish.cn/song/detail 
    
    歌曲列表
    https://autumnfish.cn/search
    -->
    <!-- 箭头 -->
    <div class="arrow">
        <span class="arrow-left">&lt;</span>
        <span class="arrow-right">&gt;</span>
    </div>
    <!-- 开关 -->
    <label>
        <input type="checkbox">
        <span class="check"></span>
    </label>
    <!-- 上下一曲 -->
    <div class="songs">
        <h2 id="song-name" style="color: #fff;font-weight: 600;">兄妹</h2>
        <div class="controls">
            <audio id="audio" src=""></audio>
            <img id="backward" class="media-btn" src="./images/backward-button.png">
            <img id="play-stop" class="media-btn">
            <img id="forward" class="media-btn" src="./images/fast-forward.png">
        </div>
    </div>
    <!-- 头部tab栏 -->
    <ul class="tab" id="tab">
        <li><a href="./photo/1.jpg" data-lightbox="mygallery" data-title="东软湖边的日出,点击左侧上一页,右侧下一页,点击图片外退出观看"><img
                    src="./photo/1.jpg" alt=""></a></li>
        <li><a href="./photo/2.jpg" data-lightbox="mygallery" data-title="体育馆旁边的小树林"><img src="./photo/2.jpg"
                    alt=""></a></li>
        <li><a href="./photo/3.jpg" data-lightbox="mygallery" data-title="教学楼的日出"><img src="./photo/3.jpg" alt=""></a>
        </li>
        <li><a href="./photo/4.jpg" data-lightbox="mygallery" data-title="湖边的晚霞"><img src="./photo/4.jpg" alt=""></a>
        </li>
        <li><a href="./photo/5.jpg" data-lightbox="mygallery" data-title="星光大道"><img src="./photo/5.jpg" alt=""></a>
        </li>
        <li><a href="./photo/6.jpg" data-lightbox="mygallery" data-title="模糊的足球场"><img src="./photo/6.jpg" alt=""></a>
        </li>
        <li><a href="./photo/7.jpg" data-lightbox="mygallery" data-title="那个大湖,风景还可以,就是以前体育课老是掉球下去"><img
                    src="./photo/7.jpg" alt=""></a></li>
        <li><a href="./photo/8.jpg" data-lightbox="mygallery" data-title="东软的天空静悄悄"><img src="./photo/8.jpg" alt=""></a>
        </li>
        <li><a href="./photo/9.jpg" data-lightbox="mygallery" data-title="雨后的东软,忘记带伞了。。"><img src="./photo/9.jpg"
                    alt=""></a></li>
        <li><a href="./photo/10.jpg" data-lightbox="mygallery" data-title="东软小镇的宿舍"><img src="./photo/10.jpg"
                    alt=""></a></li>
        <li><a href="./photo/11.jpg" data-lightbox="mygallery" data-title="又是东软小镇的宿舍"><img src="./photo/11.jpg"
                    alt=""></a></li>
        <li><a href="./photo/12.jpg" data-lightbox="mygallery" data-title="B栋拍的湖边天空"><img src="./photo/12.jpg"
                    alt=""></a></li>
        <li><a href="./photo/13.jpg" data-lightbox="mygallery" data-title="大一上课必经之路,F栋楼"><img src="./photo/13.jpg"
                    alt=""></a></li>
        <li><a href="./photo/14.jpg" data-lightbox="mygallery" data-title="C栋门外的树"><img src="./photo/14.jpg" alt=""></a>
        </li>
        <li><a href="./photo/15.jpg" data-lightbox="mygallery" data-title="军训好晒啊,不过没想到那时候居然是我大学最好玩的时光"><img
                    src="./photo/15.jpg" alt=""></a></li>
        <li><a href="./photo/16.jpg" data-lightbox="mygallery" data-title="C栋门外的足球场"><img src="./photo/16.jpg"
                    alt=""></a></li>
        <li><a href="./photo/17.jpg" data-lightbox="mygallery" data-title="学二饭堂到图书馆那条路侧边的楼梯"><img src="./photo/17.jpg"
                    alt=""></a></li>
        <li><a href="./photo/18.jpg" data-lightbox="mygallery" data-title="不知道为什么别人都喜欢拍东软湖边的天空"><img
                    src="./photo/18.jpg" alt=""></a></li>
        <li><a href="./photo/19.jpg" data-lightbox="mygallery" data-title="作者信息"><img src="./photo/19.jpg" alt=""></a>
        </li>
        <li><a href="./photo/20.jpg" data-lightbox="mygallery" data-title="AB晚上的天空"><img src="./photo/20.jpg"
                    alt=""></a></li>
    </ul>

    <!-- 框框 -->
    <div class="container" style="display: none;">
        <div class="fisrstnav">
            <ul>
                <li class="active"><a href="index1.html" target="myFrame">哈哈1</a></li>
                <li><a href="index2.html" target="myFrame">哈哈2</a></li>
                <li><a href="index3.html" target="myFrame">哈哈3</a></li>
                <li><a href="index4.html" target="myFrame">哈哈4</a></li>
                <li><a href="index5.html" target="myFrame">哈哈5</a></li>
                <li><a href="index6.html" target="myFrame">哈哈6</a></li>
                <li><a href="index7.html" target="myFrame">哈哈7</a></li>
                <li><a href="index8.html" target="myFrame">哈哈8</a></li>
                <li><a href="index9.html" target="myFrame">哈哈9</a></li>
                <li><a href="index10.html" target="myFrame">开始BB</a></li>
            </ul>
        </div>
        <iframe class="iframe" src="./index1.html" frameborder="0" name='myFrame'></iframe>

    </div>
    <div class="content">

        <!-- 音乐播放 -->
        <div class="controller">
            <div id="circle-bg" class="circle">
                <div id="circle-sm" class="circle2"><img id="cover" src="" class="fluid-img"></div>
            </div>

        </div>
        <!-- 大黑云音乐盒子 -->
        <div class="blackcloud">
            <!-- 顶部搜索控件 -->
            <div class="musictop">
                <div class="search-btn"></div>
                <div class="search">
                    <form action="">
                        <div class="jd-icon" id="search"></div>
                        <input id="content" type="search" placeholder="请输入歌曲或歌手">
                    </form>
                </div>
                <div class="close-btn" id="close"></div>
            </div>
            <!-- 中间内容组件 -->
            <div class="musicmid">
                <div class="home" style="display: none;">
                    <!-- 首页轮播图 -->
                    <div id="slider" class="focus">
                        <!-- 核心的滚动区域 -->
                        <ul id="photoslider">
                            <li>
                                <a href="#"><img src="http://p1.music.126.net/uZgf0GY54EeAcXy2Euanzg==/109951166098726016.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="http://p1.music.126.net/DoPXvLzDBPmfLO0JzVLWtg==/109951166092019335.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="http://p1.music.126.net/cfBlMI09TZ_6E01DqqISEA==/109951166098517615.jpg" alt=""></a>
                            </li>

                            <script id="photolist" type="text/html">
                                {{ each data.banners v }}
                                <li>
                                    <a href="#"><img src=" {{v.imageUrl}} " alt=""></a>
                                </li>
                                {{ /each }}
                            </script>
                        </ul>
                        <!--箭头-->
                        <div class="musicarrow">
                            <span id="left" class="left">&lt;</span>
                            <span id="right" class="right">&gt;</span>
                        </div>
                    </div>

                </div>
                <div class="list" style="display: none;">
                    <div class="recommend">
                        <h6 style="color: #fff;font-size: 3px;">为你推荐</h6>
                        <div class="btns">
                            <input id="btneason" type="button" value="陈奕迅">
                            <input id="btnjay" type="button" value="周杰伦">
                            <input id="btnsweet" type="button" value="超甜">
                            <input id="btncon" type="button" value="粤语">
                            <input id="btnEn" type="button" value="英文">
                            <input id="btngoodmood" type="button" value="天天好心情">
                        </div>


                    </div>
                    <div class="musiclist">
                        <ul id="ul">
                            <script id="songlist" type="text/html">
                                {{ each data.result.songs v }}
                                <li data-id="{{v.id}}" class="play"><span> {{v.name}} </span> <span> {{v.artists[0].name}} </span> </li>   
                                {{ /each }}
                            </script>
                        </ul>
                    </div>
                </div>
                <div class="shopcar" style="display: none;">3</div>
                <div class="my" style="display: none;">4</div>
            </div>
            <!-- 底部控件 -->
            <div class="musicbottom" id="">
                <!-- 播放控制器 -->
                <div class="musictab">
                    <div class="audio_con">
                        <audio controls autoplay="autoplay" loop class="myaudio"
                            src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/%E5%85%84%E5%A6%B9%20-%20%E6%96%B9%E5%A4%A7%E5%90%8C%E3%80%81%E8%96%9B%E5%87%AF%E7%90%AA.mp3?sign=b3d0b548449f7e56ea69053ab3febe9c&t=1621685687"></audio>
                    </div>
                </div>
                <!-- 底部tab栏 -->
                <div class="musiccon">
                    <div class="wrap">
                        <ul>
                            <li class="tabactive">
                                <span>
                                    <i id="iconfont" class="iconfont"> &#xe649;
                                    </i>
                                </span>
                                <h6>首页</h6>
                            </li>
                            <li>
                                <span>
                                    <i id="iconfont" class="iconfont"> &#xe76a;
                                    </i>
                                </span>
                                <h6>列表</h6>
                            </li>
                            <li>
                                <span>
                                    <i id="iconfont" class="iconfont"> &#xe674;
                                    </i>
                                </span>
                                <h6>购物车</h6>
                            </li>
                            <li>
                                <span>
                                    <i id="iconfont" class="iconfont"> &#xe607;
                                    </i>
                                </span>
                                <h6>我的</h6>
                            </li>

                        </ul>
                    </div>
                    <!-- <div class="wrap">
                        <div class="item">
                            <span>
                                <i class="iconfont"> &#xe76a;
                                </i>
                            </span>
                            <h6>列表</h6>
                        </div>
                    </div>
                    <div class="wrap">
                        <div class="item">
                            <span>
                                <i class="iconfont"> &#xe674;
                                </i>
                            </span>
                            <h6>购物车</h6>
                        </div>
                    </div>
                    <div class="wrap">
                        <div class="item">
                            <span>
                                <i class="iconfont"> &#xe607;
                                </i>
                            </span>
                            <h6>我的</h6>
                        </div>
                    </div> -->

                </div>
            </div>


        </div>

    </div>

</body>

</html>